<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div style="background-color: #0A2536;height: 50px;color: white;padding: 0px 20px 0px 10px;">
        <div style="height: 100%;float: left;">
            <a href="#" class="title">
                开课吧首页
            </a>
            <a href="#" class="title">
                创业微学院
            </a>
            <a href="#" class="title">
                微聚
            </a>
            <a href="#" class="title">
                论坛
            </a>
        </div>
        <div style="float: right;">
            <div class="title">
                登录|注册
            </div>
            <div class="title">
                播放记录
            </div>
            <div class="title">
                APP下载
            </div>
        </div>
    </div>
    <div style="background: linear-gradient(to right,#FDFEFC,#2aa5f2);height: 50px;padding: 0px 10px 0px 10px;">
        <div style="height: 100%;float: left;">
            <div class="secondTitle" style="color: #84D3F2;">
                <div style="display: inline-block;vertical-align: middle;font-size: 30px;">
                    摄影
                </div>
                <div style="font-size: medium;display: inline-block;vertical-align: middle;">·开课吧</div>
            </div>
            <div class="secondTitle">
                个人中心
            </div>
            <div class="secondTitle">
                视频播放
            </div>
        </div>
        <div style="float: right;">
            <img src="C:\Users\Administrator\Desktop\temp\icon.jpeg" class="icon">
            <img src="C:\Users\Administrator\Desktop\temp\icon.jpeg" class="icon">
            <img src="C:\Users\Administrator\Desktop\temp\icon.jpeg" class="icon">
        </div>
    </div>
    <div class="background">
        <img src="C:\Users\Administrator\Desktop\temp\风景.jpeg" style="float: left;width: 40vw;height: 40vh;">
        <div style="float: right;width: 30vw;">
            <form action="#" method="post">
                <div style="font-weight: bold;font-size: larger;">使用手机号码注册</div>
                <div>
                    <input type="text" id="nickname" name="nickname" placeholder="昵称" >
                </div>
                <div>
                    <input type="number" id="phone" name="phone" placeholder="手机号码" >
                </div>
                <div>
                    <input type="text" id="code" name="code" placeholder="请输入验证码" >
                    <span class="inputCode">请输入验证码</span>
                    <div class="error">请输入正确的验证码</div>
                </div>

                <div>
                    <input type="password" id="password" name="password" placeholder="密码" >
                </div>
                <div>
                    <input type="password" id="confirmPassword" name="confirmPassword" placeholder="确认密码" >
                </div>
                <button type="submit" class="login">登录</button>
                <div class="login-link">
                    已有账号？<a href="#">马上登录</a>
                </div>
            </form>
        </div>
    </div>
    <div class="footer">
        Copyright
    </div>
</body>
<style>
    body {
        margin: 0px;
    }

    .footer {
        height: 15vh;
        width: 100%;
        background-color: #0A2536;
        position: absolute;
        bottom: 0px;
        text-align: center;
        color: white;
        line-height: 15vh;
    }

    .login-link a {
        text-decoration: none;
        color: #72b6d1;
    }

    .inputCode {
        color: #84D3F2;
        cursor: pointer;
    }

    .login-link {
        margin-top: 20px;
    }

    .login {
        background-color: #2FADE7;
        width: 300px;
        border: 0px;
        border-radius: 5px;
        line-height: 2.2;
        color: white;
    }

    form div {
        margin-bottom: 30px;
    }

    #code {
        display: inline;
        width: 150px;
        margin-right: 35px;
    }

    .background {
        width: 80vw;
        height: 50vh;
        margin: 0 auto;
        margin-top: 40px;
    }

    .title {
        color: white;
        text-decoration: none;
        height: 50px;
        line-height: 50px;
        display: inline-block;
        text-align: center;
        margin-left: 10px;
    }

    .title:hover {
        color: red;
    }

    .secondTitle {
        color: black;
        text-decoration: none;
        height: 50px;
        line-height: 50px;
        display: inline-block;
        text-align: center;
        margin-left: 10px;
    }

    .icon {
        height: 40px;
        width: 40px;
        border-radius: 50%;
        margin-top: 5px;
        margin-right: 10px;
    }

    input {
        width: 300px;
        height: 36px;
        padding: 0 12px;
        border: 1px solid #ccc;
        border-radius: 8px;
        font-size: 14px;
        box-sizing: border-box;
    }

    .error {
        font-size: small;
        height: 0px;
        color: red;
    }
</style>

</html>